<style lang="scss">
// @import '@/assets/css/variable';
.detail{
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: linear-gradient(to bottom, #252d3b , #0f1315);
	background-color: #0f1315;
	.videoc{
		object-fit: cover;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.match99{
		img{
			// position: absolute;
			width: 100%;
			// height: 100%;
		}
	}
}
</style>

<template>
  <div class="detail flex flex-column align-center justify-around" ref="detail">
	<div class="match99 flex-1 flex flex-column align-center justify-around">
		<!-- <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/46f2eaa3-f4b7-4eaf-b747-686bd51dfec3.gif"  v-if="!isWaiting"> -->
		<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/b8a5b2d2-3f96-4239-b5d1-a8198363cb1b.gif"  v-if="!isWaiting">
		
		<img :style="{opcity:isWaiting?1:0}" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/3f7da3b4-8884-45f1-8925-4fea39610257.png" v-if="isWaiting">
	</div>
  </div>
</template>
<script>
	import {Dialog} from 'vant'
export default {
	name:'match',
	components: {},
	data() {
		return {
			videoConfig:{
			  playStatus: '',
			  muteStatus: '',
			  isMute: true,
			  isPlay: false,
			  preload: true, //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
			  controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
			  autoplay: true
			},
			it:4,
			initTime:4,
			t:'',
			isError:false,
			isWaiting:false,
			isReturn:false,
			isDestoy:false
		};
	},
	created() {
		console.log('created match')
		// 累计匹配次数 防止恶意频繁匹配
		let matchTimes = localStorage.getItem('matchTimes')
		localStorage.setItem('matchTimes',(Number(matchTimes)+1))
		this.matePolicy()
	},
	mounted() {
		console.log('mounted match')
		// this.$refs.detail.appendChild(this.image)
		this.downTime()
	},
	beforeDestroy() {
		// let videoc = document.getElementsByClassName('videoc')
		// this.$refs.detail.removeChild(this.image)
		console.log('beforeDestroy_match')
		clearInterval(this.t)
		console.log('clearInterval')
		console.log('this.t',this.t)
		this.isDestoy = true
		console.log('isDestoy',this.isDestoy)
	},
	methods: {
		imgLoad(img, callback) {
			var timer = setInterval(function() {
				if (img.complete) {
					callback(img)
					clearInterval(timer)
				}
			}, 50)
		},
		matePolicy() {
			const params = {
				a:1
			}
			this.$request.matePolicy(params).then(res=>{
				console.log('res',res)
				if(res.code == 200){
					this.isReturn = true
				}
				if(res.code!=200){
					this.isError = true
					Dialog({ title:'温馨提示', message: res.msg, closeOnClickOverlay:true }).then(res=>{
						this.$router.go(-1)
					})
				}
			}).finally(res=>{
				console.log('finally')
				console.log('this.t',this.t)
				console.log('href',location.href)
				console.log('isDestoy',this.isDestoy)
				if(!this.isDestoy){
					setTimeout(()=>{
						this.toWhatPage()
					},500)
				}
			})
		},
		//倒计时
		downTime() {
			this.t = setInterval(()=>{
				this.initTime  = this.initTime - 0.1
				if(this.initTime<=0) {
					// this.initTime = this.it
					console.log('页面跳转')
					// 需要获取匹配结果
					// this.$refs.detail.removeChild(this.image)
					clearInterval(this.t)
					this.toWhatPage()
				}
			},100)
			console.log('this.t',this.t)
		},
		toWhatPage() {
			console.log('toWhatPage')
			if(this.initTime<=0){
				console.log('this.isError',this.isError)
				if(this.isError){
					// this.$router.go(-1)
				}else{
					const matchResult = localStorage.getItem('matchResult')
					console.log('___matchResult',matchResult)
					console.log('___isReturn',this.isReturn)
					if(!this.isReturn){
						this.isWaiting = true
					}else{
						if(matchResult==0){
							this.$router.replace(`/matchFail`)
						}else{
							this.$router.replace(`/matchResult`)
						}
					}
				}
			}
		},
		searchBtn() {
			console.log("search")
		}
	}
}

</script>